placeholder

hello

Test line one
Test line two
Test line three

Test Header

Some content

Claude Code Review

Summary

This PR adds context window usage tracking via RUN_FINISHED events and a sparkline component. Clean implementation overall, but contains one standards violation and two functional correctness issues to address before merge.

Blocker Issues: None.

Claude Code Review

CRITICAL: Use type not interface. ContextUsage.tsx line 16.

MAJOR 1: Accumulation bug. event-handlers.ts lines 279-288.

MAJOR 2: Hardcoded limit 200K. types.ts line 50.

MAJOR 3: Unbounded perTurn. event-handlers.ts line 287.

Claude Code Review - Part 1 of 4: Summary and Critical Issues

Summary: This PR adds context window usage tracking from RUN_FINISHED events with a sparkline display. Clean implementation overall with one standards violation and two correctness issues.

CRITICAL - interface instead of type for props
File: components/frontend/src/components/session/ContextUsage.tsx line 16
Problem: "interface ContextUsageProps" violates the zero-tolerance no-interface rule.
Standard: frontend-development.md - "Use type Over interface - REQUIRED: Always prefer type"
Fix: change "interface ContextUsageProps" to "type ContextUsageProps ="

Claude Code Review - Part 2 of 4: Major Issues

MAJOR 1 - Token accumulation semantics are incorrect
File: components/frontend/src/hooks/agui/event-handlers.ts lines 279-288
Problem: The code accumulates "used + (input_tokens + output_tokens)" across turns. In the Anthropic API, input_tokens for turn N already includes all prior conversation history. Accumulating these values double-counts previous context causing "used" to exceed "limit" and "percent" to exceed 100% after just a few turns. This makes the feature display incorrect data from the second turn onward.
Fix: Replace the accumulated "used" with input_tokens from the most recent turn only. Use output_tokens per-turn for the sparkline bars instead.

MAJOR 2 - Hardcoded context limit ignores model selection
File: components/frontend/src/hooks/agui/types.ts line 50
Problem: limit: 200_000 is hardcoded. Claude models have varying context windows. The percent calculation and "X/200K" label will be wrong for non-200K models.
Fix: Drive the limit from the session model configuration, or add a TODO comment.

Claude Code Review - Part 3 of 4: Remaining Issues

MAJOR 3: perTurn grows unbounded. Cap the array on each write to prevent long sessions from accumulating thousands of state entries.

MINOR 1: Array index as React key in sparkline bars - use a stable key derived from position in the full perTurn array.

MINOR 2: Per frontend-development.md single-use components should be colocated with their page. Please confirm whether ContextUsage is only used in one place.

Recommendations: 1 Fix token accumulation. 2 Fix interface to type. 3 Cap perTurn array. 4 Address hardcoded limit. 5 Fix array index key.

Positives: Correct unknown-cast pattern for event assertions. Inline object type in agui.ts is correct. Graceful no-op when usage data is absent. Division-by-zero guard in sparkline. Clean formatTokens helper.

Merge Readiness — Blockers Found\n\n| Check | Status | Detail |\n|-------|--------|--------|\n| CI | FAIL | Failing: lint-frontend, build-and-push (frontend, ./components/frontend, quay.io/ambient_code/vteam_frontend, ./component..., lint-summary (+1 more) |\n| Merge conflicts | pass | — |\n| Review comments | needs_review | Has comments — agent to evaluate |\n| Jira hygiene | warn | No Jira reference found |\n| Staleness | pass | — |\n| Diff overlap risk | pass | — |\n\n> This comment is auto-generated by the PR Overview workflow and will be updated when the PR changes.\n\n

Claude Code Review for PR 825 - context-usage-indicator

Claude Code Review

Summary

This PR introduces context window usage tracking for the frontend session UI. It adds token accumulation in the RUN_FINISHED event handler, a new ContextUsage sparkline component, and model-aware context limit lookup. The implementation is clean and well-typed. One functional accuracy issue with the Opus 4 context limit and a few minor style points are worth addressing.

Blocker Issues: None

Critical Issues: None

Major Issues

1. Incorrect context window limit for Claude Opus 4

File: components/frontend/src/types/agui.ts (line ~296)

Problem: claude-opus-4 is mapped to 1,000,000 tokens, but Claude Opus 4 (including claude-opus-4-6, the model ID this platform defaults to) has a 200K context window, the same as Sonnet and Haiku. The prefix check model.startsWith(claude-opus-4) will match claude-opus-4-6 and show 83K/1M instead of the correct 83K/200K, making the indicator actively wrong for the default model.

Standard violated: Code quality, functional correctness of the core feature.

Suggested fix: Verify against Anthropic published context limits. If all Claude 4.x models are 200K, remove the Opus 1M entry. If a 1M variant genuinely exists, use its exact model ID prefix rather than the generic claude-opus-4 prefix.

Minor Issues

2. perTurn array grows unbounded (event-handlers.ts line ~281): Every turn appends without a cap. Display is limited to slice(-24) but state grows indefinitely. Fix: add .slice(-50) when building the array.

3. Hardcoded bg-green-500 in sparkline (ContextUsage.tsx line 40): Does not adapt to dark mode or the Shadcn token system. Use a semantic token like bg-primary/70 instead.

4. Array index as React key (ContextUsage.tsx line 38): key={i} is acceptable for a visual shifting list but is a minor pattern deviation. Consider a composite key or add a comment.

5. getContextLimit utility in types file (agui.ts line ~290+): Runtime logic does not belong in a types file. Move CONTEXT_LIMITS and getContextLimit to src/utils/model.ts.

Positive Highlights

Clean TypeScript throughout: no any anywhere in the diff, all new types use the type keyword.

Excellent type extension pattern: PlatformRunFinishedEvent = RunFinishedEvent and { result?: ... } augments the base type cleanly without forking.

Graceful degradation: getContextLimit falls back to DEFAULT_CONTEXT_LIMIT and the event handler guards on result?.usage, so missing usage data never crashes.

Sensible UX: capping the sparkline to 24 turns and guarding on recent.length > 0 keep the display clean from the start.

formatTokens handles raw, K, and M scale tiers correctly and concisely.

Recommendations

1. (Must) Correct the Opus 4 context limit before merge. The feature core display is wrong for the default platform model.
2. (Should) Cap perTurn at 50 entries to prevent unbounded state growth in long sessions.
3. (Nice to have) Replace bg-green-500 with a semantic Shadcn/Tailwind color token.
4. (Nice to have) Move getContextLimit to a utils/ file to keep the types file focused on type definitions.

Claude Code Review

Summary

This PR adds context window usage tracking to the session UI, including a new ContextUsage component with a sparkline visualization, a PlatformRunFinishedEvent type extension, and context accumulation logic in the AG-UI event handler. The implementation is clean TypeScript with proper types throughout. One meaningful semantic bug affects the correctness of the primary displayed metric; a few minor style points are also noted.

Issues by Severity

Blocker Issues

None

Critical Issues

None

Major Issues

1. contextUsage.used accumulates tokens across turns and will exceed the context limit — misleading display

• File: components/frontend/src/hooks/agui/event-handlers.ts (lines 282–289) and components/frontend/src/components/session/ContextUsage.tsx (line 30)
• Problem: used is a cumulative sum of input_tokens + output_tokens across every RUN_FINISHED event. Because input_tokens in LLM APIs represents the full prompt sent each turn (including the entire prior conversation), summing it across turns produces a number that inflates rapidly and will routinely exceed the context limit — e.g., a 10-turn session with 8K input tokens per turn gives used = 80K+ vs. a 200K limit. The UI renders {formatTokens(used)}/{formatTokens(limit)}, which reads to users as "tokens currently in the context window / context limit". A value that can exceed the limit makes the ratio nonsensical and the display misleading.
• Standard violated: frontend-development.md — Loading and error states handled; more broadly, accuracy of UI data presented to users.
• Suggested fix: Use the input_tokens from the most recent run as used, since input_tokens for that turn already represents the entire conversation context sent to the model:

if (event.result?.usage) {
  const { input_tokens = 0, output_tokens = 0 } = event.result.usage

  state.contextUsage = {
    // input_tokens of the last turn == current context window occupancy
    used: input_tokens,
    perTurn: [...state.contextUsage.perTurn, input_tokens + output_tokens],
  }
}

The sparkline (perTurn) can still store combined tokens per turn for per-turn activity visualization, while used correctly reflects current context occupancy.

Minor Issues

1. Array index used as React key

• File: components/frontend/src/components/session/ContextUsage.tsx (line 40)
• Problem: key={i} (array index) is used for sparkline bars. While the sparkline only appends and the bars don't reorder, React's reconciler will incorrectly diff on insert/remove if the leading items ever change. A more stable key is the turn index from the full perTurn array.
• Suggested fix:

// Compute start offset before the map
const offset = state.contextUsage.perTurn.length - recent.length
// ...
{recent.map((tokens, i) => (
  <div key={offset + i} ... />
))}

2. ContextUsage component placed in shared directory despite single-page usage

• File: components/frontend/src/components/session/ContextUsage.tsx
• Problem: Per the colocate-single-use-components rule (frontend-development.md), components used in only one page should live in that page's _components/ directory. ContextUsage is currently only consumed by [sessionName]/page.tsx.
• Standard violated: frontend-development.md — Single-use components colocated with their page.
• Suggested fix: Move to app/projects/[name]/sessions/[sessionName]/_components/ContextUsage.tsx unless the component is expected to be reused imminently. (Note: MessagesTab and SessionStartingEvents follow the same pattern as this PR, so this is an existing area of drift — worth fixing here or filing a follow-up.)

Positive Highlights

• Fully typed, zero any: All new code uses proper TypeScript types. ResultUsage, PlatformRunFinishedEvent, ContextUsageProps, and AGUIClientState.contextUsage are all correctly typed.
• type over interface throughout: Every new type definition uses type, consistent with project standards.
• Clean event-handler pattern: The usage extraction in handleRunFinished is idiomatic — optional chaining on event.result?.usage, destructuring with defaults, and immutable state update.
• Sparkline is Tailwind-native: Dynamic bar heights via inline style are the correct approach where Tailwind can't express runtime values — no unnecessary dependencies added.
• Graceful null handling: The component correctly guards recent.length > 0 before rendering the sparkline, and Math.max(...recent, 1) prevents a divide-by-zero.
• getContextLimit prefix matching is correct: All currently shipping model families are handled, and the 200K default is the right safe fallback.

Recommendations

1. (Fix before merge) Correct contextUsage.used to store input_tokens from the most recent turn rather than a running cumulative sum. The PR description says "cumulative" but the denominator display (/200K) only makes sense as current context occupancy.
2. (Follow-up) Move ContextUsage.tsx to the session page's _components/ directory per colocate rules, or open a tracking issue to address the broader pattern drift in components/session/.
3. (Follow-up) Stabilize the sparkline key to be turn-offset-based rather than render-index-based.

🔍 View AI decision process (logs available for 90 days)

a wreck of an implementation attempt. i stopped caring about this since switching to the 1m context 4.6